﻿@page "/SchedulerRecurringAppointments"

<DemoPageSectionComponent Id="Scheduler-RecurringAppointments">
    <DxScheduler @bind-StartDate="@StartDate"
                 DataStorage="@DataStorage"
                 @bind-ActiveViewType="@ActiveViewType"
                 AppointmentFormMode="SchedulerAppointmentFormMode.EditForm"
                 CssClass="demo-sc-size">
        <DxSchedulerDayView VisibleTime="@VisibleTime"></DxSchedulerDayView>
        <DxSchedulerWorkWeekView VisibleTime="@VisibleTime"></DxSchedulerWorkWeekView>
        <DxSchedulerWeekView VisibleTime="@VisibleTime"></DxSchedulerWeekView>
        <DxSchedulerMonthView CellMinWidth="120"></DxSchedulerMonthView>
        <DxSchedulerTimelineView Duration="@(TimeSpan.FromDays(7))" CellMinWidth="100">
            <Scales>
                <DxSchedulerTimeScale Unit="@SchedulerTimeScaleUnit.Week"></DxSchedulerTimeScale>
                <DxSchedulerTimeScale Unit="@SchedulerTimeScaleUnit.Day"></DxSchedulerTimeScale>
            </Scales>
        </DxSchedulerTimelineView>
    </DxScheduler>

    @code {
        DateTime StartDate { get; set; } = DateTime.Today;
        SchedulerViewType ActiveViewType { get; set; } = SchedulerViewType.WorkWeek;
        DxSchedulerTimeSpanRange VisibleTime = new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), TimeSpan.FromHours(19));

        DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
            AppointmentsSource = RecurringAppointmentCollection.GetAppointments(),
            AppointmentMappings = new DxSchedulerAppointmentMappings() {
                Type = "AppointmentType",
                Start = "StartDate",
                End = "EndDate",
                Subject = "Caption",
                AllDay = "AllDay",
                Location = "Location",
                Description = "Description",
                LabelId = "Label",
                StatusId = "Status",
                RecurrenceInfo = "Recurrence"
            }
        };
    }
</DemoPageSectionComponent>
